<template>
  <el-row class="board-page-wrapper">
    <el-row :gutter="10" class="query-container">
      <el-col :span="6" class="flex-wrapper">
        <span class="query-label">学年*</span>
        <el-select v-model="query.schoolYear" size="small" style="width: calc(100% - 70px);">
          <el-option v-for="(item, index) in studyYearList" :label="item.dictLabel" :value="item.dictLabel"
          	:key="item.dictLabel"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6" class="flex-wrapper">
        <span class="query-label">学期*</span>
        <el-select v-model="query.semester" size="small" style="width: calc(100% - 70px);">
          <el-option v-for="(item, index) in studyWeekList" :label="item.dictLabel" :value="item.dictLabel"
          		:key="item.dictLabel"></el-option>
          </el-select>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button size="small" @click='btn()'>搜索</el-button>
      </el-col>
      <el-col :span="6" class="text-right">
        <el-button size="small" @click="exportExcel('#orderTableWrapper')">导出EXCEL</el-button>
        <el-button size="small" @click="exportPDF('#orderTableWrapper')">导出PDF</el-button>
      </el-col>
    </el-row>
    <section class="board-table-wrapper" id="orderTableWrapper">
      <el-table
        class="orderTable"
        id="orderTable"
        :data="tableData"
        border
        style="width: 100%"
        :span-method="spanMethod"
      >
        <el-table-column prop="timeSlot" label="时间段" width="85" align="center"> </el-table-column>
        <el-table-column prop="times" label="节次" width="85" align="center"> </el-table-column>
        <el-table-column prop="monday" label="星期一" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.monday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.monday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.monday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.monday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.monday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="tuesday" label="星期二" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.tuesday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.tuesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.tuesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.tuesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.tuesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="wednesday" label="星期三" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.wednesday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.wednesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.wednesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.wednesday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.wednesday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="thursday" label="星期四" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.thursday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.thursday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.thursday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.thursday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.thursday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="friday" label="星期五" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.friday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.friday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.friday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.friday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.friday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="saturday" label="星期六" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.saturday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.saturday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.saturday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.saturday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.saturday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="sunday" label="星期日" align="center">
          <template slot-scope="scope">
            <el-popover placement="right-start" title="" width="300" trigger="hover" v-if="scope.row.sunday">
              <div class="table-wrapper">
                <p class="td-title">{{ scope.row.sunday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.sunday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
              <div class="table-wrapper" slot="reference">
                <p class="td-title">{{ scope.row.sunday.title }}</p>
                <div class="table-content">
                  <p v-for="(item, index) in scope.row.sunday.content">
                    <i class="iconfont" :class="item.icon"></i>
                    <span class="td-text">{{ item.text }}</span>
                  </p>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </el-row>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import download from '@/utils/htmlToPdf.js'
	import {
		getSenateSchedule,
		getClassroom
	} from '@/api/public/index.js'
  export default {
    data() {
      return {
        query: {
		  semester: '1',
		  schoolYear: '2020-2021'
        },
        tableData: [],
        rowList: [],
        spanArr: [],
        position: 0,
				studyYearList: [],
				studyWeekList: [
				],
		data: [
			// {
			// 	"BJMC": "智能A2012班", //班级名称
			// 	"address": "思齐楼309", // 上课地址
			// 	"XKNJ": "2020", // 选课年级
			// 	"JSGH": "20130077", //教师工号
			// 	"SKSJ": "星期一第1-2节{1-5周,7-16周};星期一第1-2节{17周};星期二第3-4节{2-16周(双)};星期四第1-2节{2-16周(双)};星期四第7-8节{7周}",
			// 	"KKXND": "2020-2021",
			// 	"JXDD": "思齐楼309;思齐楼306;思齐楼301;思齐楼308;思齐楼309",
			// 	"KCMC": "C语言程序设计", //课程名称
			// 	"XF": "4.0", // 学分
			// 	"KKXQM": "2", //开课学期码
			// 	"JXBMC": "(2020-2021-2)-21A1P19002-26", // 教学班名称
			// 	"whatDay": "星期一", // 星期
			// 	"ZXS": "64", //总学时
			// 	"SJXS": 32, //实践学时
			// 	"schooltime": "星期一第1-2节{1-5周,7-16周}",
			// 	"JXBH": "B62886D3D8BAC78FE053AA001EAC55DE", //教学班号
			// 	"LLXS": 32, // 理论学时
			// 	"KCXZ": "公共必修课", // 课程性质码
			// 	"JSXM": "吴娜", // 教师姓名
			// 	"SKBJH": "200110102", //上课班级号
			// 	"whichSection": "1-2" // 第几节
			// }
		]
      }
    },
    mounted() {
      this.queryData()
	   let _this=this;
	  //this.init()
this.content_data('school_year_type')
			this.content_data('semester_type')
    },
    components: {},
    methods: {
      queryData() {
        //查询操作
        this.tableData = [
          {
            timeSlot: '上午',
            times: '1',
            monday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(3-4节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            tuesday: '',
            wednesday: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '1',
            type: 0
          },
          {
            timeSlot: '上午',
            times: '2',
            monday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(3-4节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            tuesday: '',
            wednesday: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '1',
            type: 0
          },
          {
            timeSlot: '上午',
            times: '3',
            monday: '',
            tuesday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(5-6节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            wednesday: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 2
          },
          {
            timeSlot: '上午',
            times: '4',
            monday: '',
            tuesday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(5-6节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            wednesday: '',
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 2
          },
          {
            timeSlot: '下午',
            times: '5',
            monday: '',
            tuesday: '',
            wednesday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(5-6节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 4
          },
          {
            timeSlot: '下午',
            times: '6',
            monday: '',
            tuesday: '',
            wednesday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(5-6节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            thursday: '',
            friday: '',
            saturday: '',
            sunday: '',
            type: 4
          },
          {
            timeSlot: '下午',
            times: '7',
            monday: '',
            tuesday: '',
            wednesday: '',
            thursday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(7-8节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            friday: '',
            saturday: '',
            sunday: '',
            type: 6
          },
          {
            timeSlot: '下午',
            times: '8',
            monday: '',
            tuesday: '',
            wednesday: '',
            thursday: {
              // title: 'Java程序设计',
              // content: [
              //   { icon: 'icon-clock', text: '(7-8节)1-16周' },
              //   { icon: 'icon-address', text: '主校区 实训A2-303' },
              //   { icon: 'icon-home', text: '(2020-2021-1)-01A1X19011-3' },
              //   { icon: 'icon-home', text: '智能S2061班' }
              // ]
            },
            friday: '',
            saturday: '',
            sunday: '',
            type: 6
          }
        ]
				this. spanArr=[
          [4, 1, 1, 1, 1, 1, 1, 1, 1],
          [0, 1, 1, 1, 1, 1, 1, 1, 1],
          [0, 1, 1, 1, 1, 1, 1, 1, 1],
          [0, 1, 1, 1, 1, 1, 1, 1, 1],
          [4, 1, 1, 1, 1, 1, 1, 1, 1],
          [0, 1, 1, 1, 1, 1, 1, 1, 1],
          [0, 1, 1, 1, 1, 1, 1, 1, 1],
          [0, 1, 1, 1, 1, 1, 1, 1, 1]
        ]
      },
      spanMethod({ row, column, rowIndex, columnIndex }) {
        return {
          rowspan: this.spanArr[rowIndex][columnIndex],
          colspan: this.spanArr[rowIndex][columnIndex] ? 1 : 0
        }
      },
      // 导出EXCEL
      exportExcel(id) {
        var reportTitle = '学生课表.xlsx'
        /* generate workbook object from table */
        // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
        var fix = document.querySelector('.orderTable')
        var wb
        var xlsxParam = { raw: true } //转换成excel时，使用原始的格式
        if (fix) {
          wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix), xlsxParam)
          document.querySelector(id).appendChild(fix)
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector(id), xlsxParam)
        }
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(
            new Blob([wbout], {
              type: 'application/octet-stream'
            }),
            reportTitle
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },

      exportPDF() {
        let dom = document.getElementById('orderTableWrapper')
        download.downloadPDF(dom, '学生课表')
      },
	  btn(){
		  this.init()
	  },
	  init() {
		  let _this=this;
			this.queryData()
	  	getSenateSchedule(this.query).then(res => {
	  		if(res.code==200){
	  			 this.$message({
	  			          showClose: true,
	  			          message: res.msg,
	  			          type: 'success'
	  			        });
	  			this.data=res.data
	  			let data = this.data;
	  			data.forEach(function(a, b) {
	  				let num = a.whichSection.split("-")[0]; //修改当前第几个
	  				let num2 = ''; //修改第几列
	  				let num3 = 2; //当前第列
	  				let status = 'monday'
	  				switch (a.whatDay) {
	  					case '星期一':
	  						num3 = 2
	  						_this.tableData[num - 1].monday = {
	  							title: a.KCMC,
	  							content: [{
	  									icon: 'icon-clock',
	  									text: a.schooltime
	  								},
	  								{
	  									icon: 'icon-address',
	  									text: a.address
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.JXBMC + '-' + a.KKXQM
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.BJMC
	  								}
	  							]
	  						}
	  						break;
	  					case '星期二':
	  						num3 = 3
	  						status = 'tuesday'
	  						_this.tableData[num - 1].tuesday = {
	  							title: a.KCMC,
	  							content: [{
	  									icon: 'icon-clock',
	  									text: a.schooltime
	  								},
	  								{
	  									icon: 'icon-address',
	  									text: a.address
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.JXBMC + '-' + a.KKXQM
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.BJMC
	  								}
	  							]
	  						}
	  						break;
	  					case '星期三':
	  						num3 = 4
	  						status = 'wednesdy'
	  						_this.tableData[num - 1].wednesday = {
	  							title: a.KCMC,
	  							content: [{
	  									icon: 'icon-clock',
	  									text: a.schooltime
	  								},
	  								{
	  									icon: 'icon-address',
	  									text: a.address
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.JXBMC + '-' + a.KKXQM
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.BJMC
	  								}
	  							]
	  						}
	  						break;
	  					case '星期四':
	  						num3 = 5
	  						status = 'thursday'
	  						_this.tableData[num - 1].thursday = {
	  							title: a.KCMC,
	  							content: [{
	  									icon: 'icon-clock',
	  									text: a.schooltime
	  								},
	  								{
	  									icon: 'icon-address',
	  									text: a.address
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.JXBMC + '-' + a.KKXQM
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.BJMC
	  								}
	  							]
	  						}
	  						break;
	  					case '星期五':
	  						num3 = 6
	  						status = 'friday'
	  						_this.tableData[num - 1].friday = {
	  							title: a.KCMC,
	  							content: [{
	  									icon: 'icon-clock',
	  									text: a.schooltime
	  								},
	  								{
	  									icon: 'icon-address',
	  									text: a.address
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.JXBMC + '-' + a.KKXQM
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.BJMC
	  								}
	  							]
	  						}
	  						break;
	  					case '星期六':
	  						num3 = 7
	  						status = 'saturday'
	  						_this.tableData[num - 1].saturday = {
	  							title: a.KCMC,
	  							content: [{
	  									icon: 'icon-clock',
	  									text: a.schooltime
	  								},
	  								{
	  									icon: 'icon-address',
	  									text: a.address
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.JXBMC + '-' + a.KKXQM
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.BJMC
	  								}
	  							]
	  						}
	  						break;
	  					case '星期日':
	  						num3 = 8
	  						status = 'sunday'
	  						_this.tableData[num - 1].sunday = {
	  							title: a.KCMC,
	  							content: [{
	  									icon: 'icon-clock',
	  									text: a.schooltime
	  								},
	  								{
	  									icon: 'icon-address',
	  									text: a.address
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.JXBMC + '-' + a.KKXQM
	  								},
	  								{
	  									icon: 'icon-home',
	  									text: a.BJMC
	  								}
	  							]
	  						}
	  						break;
	  			
	  					default:
	  						break
	  				}
	  				num2 = _this.spanArr[num - 1]
	  				num2[num3] = 2
	  				let tableData = _this.tableData[num - 1]
	  				console.log(_this.tableData[num - 1].status)
	  			
	  			
	  			})
	  		}else{
	  			  this.$message({
	  			          showClose: true,
	  			          message: res.msg
	  			        });
	  		}
	  	})
		},
		content_data(type) {
			this.getDicts(type).then(res => {
				var obj = {}
				if (res.code === 200) {
		
					switch (type) {
						/* 学年 */
						case 'school_year_type':
							this.studyYearList = res.data
							break;
							/* 校区 */
						case 'campus_type':
							this.schoolList = res.data
							break;
							/* 周次 */
						case 'keekly_type':
							this.weekTimeList = res.data
							break;
							/* 星期 */
						case 'week_type':
							this.weeklist = res.data
							break;
							/* 节次 */
						case 'section_type':
							this.sectionlist = res.data
							break;
							/* 学期 */
							case 'semester_type':
								this.studyWeekList = res.data
								break;
							
						default:
							break;
					}
				}
			})
		}
    }
  }
</script>

<style lang="scss" scoped>
  .board-page-wrapper {
    padding: 10px;
    .query-container {
      line-height: 32px;
      padding: 10px 30px;
      .flex-wrapper {
        display: flex;
        flex-wrap: nowrap;
      }
      .query-label {
        display: inline-block;
        width: 70px;
        text-align: right;
        margin-right: 5px;
      }
    }
  }
  .table-wrapper {
    display: flex;
    flex-direction: column;
    text-align: left;
    .td-title {
      line-height: 25px;
      font-size: 14px;
      color: #101010;
    }
    .td-text {
      font-size: 12px;
    }
    .table-content {
      display: flex;
      flex-direction: column;
      p {
        display: flex;
        justify-content: space-between;
        text-align: left;
        i {
          width: 20px;
        }
        span {
          flex: 1;
          width: 100%;
        }
      }
    }
    p {
      margin: 0;
    }
  }

  .text-right {
    text-align: right;
  }
</style>
